<template>
  <el-container>
      <el-header>
        <h3>学员信息</h3>
      </el-header>
      <el-main>
        <el-form :inline="true" :model="form" ref="form" class="demo-form-inline" size="medium">
          <el-form-item prop="query_field">
            <el-input type="text" v-model="form.query_field" placeholder="学员姓名或者手机号码" suffix-icon="el-icon-search" @keyup.enter.native="search"></el-input>
          </el-form-item>
          <el-form-item label="所属教练:" prop="coach_id">
            <el-select v-model="form.coach_id" placeholder="全部" >
              <el-option
                v-for="item in coachList"
                :key="item.id"
                :value="item.id"
                :label="item.name"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="练车进度:" prop="degree">
            <el-select v-model="form.degree" placeholder="全部">
              <el-option
                v-for="item in degreeList"
                :key="item.id"
                :value="item.id"
                :label="item.name"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="学员类型:" prop="type">
            <el-select v-model="form.type">
              <el-option
                v-for="item in typeList"
                :label="item.name"
                :key="item.id"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-refresh" @click.prevent="reset('form')" type="primary">重置</el-button>
            <el-button icon="el-icon-search" @click.prevent="search" type="primary">查询</el-button>
          </el-form-item>
        </el-form>
        <el-table
        :data="tableData"
        border
        v-loading="loading"
        >
          <el-table-column
            label="图像"
          >
            <template slot-scope="scope">
                <el-avatar :size="50" :src="scope.row.avatar"></el-avatar>
            </template>
          </el-table-column>
          <el-table-column
            label="姓名"
            prop="name"
          >
          </el-table-column>
          <el-table-column
            label="手机号"
            prop="mobile"
          >
          </el-table-column>
          <el-table-column
            label="所属教练"
            prop="coach"
          >
          </el-table-column>
          <el-table-column
            label="驾考进度"
            prop="degree"
          >
          </el-table-column>
          <el-table-column
            label="学员类型"
            prop="type"
          >
          </el-table-column>
          <el-table-column
            label="约车权限"
          >
              <template slot-scope="scope">
                  <el-switch v-model="scope.row.auth" @change="changeAuth(scope.row.id,scope.$index)"></el-switch>
              </template>
          </el-table-column>
          <el-table-column
            label="推荐学员(个)"
            prop="recommend_student_count"
          >
          </el-table-column>
          <el-table-column
            label="练车记录"
          >
            <template slot-scope="scope">
              <el-link @click.prevent="jumpRecord(scope.row.id)">练车记录</el-link>
            </template>
          </el-table-column>
          <el-table-column
            label="推荐学员"
          >
            <template slot-scope="scope">
              <el-link @click.prevent="jumpRecommend(scope.row.id)">查看</el-link>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
          >
            <template slot-scope="scope">
              <el-button type="danger" size="small" class="el-icon-delete" @click.prevent="del(scope.row.id)">删除</el-button>
              <el-button type="primary" size="small"  class="el-icon-edit" @click.prevent="info(scope.row.id)">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
      <el-footer>
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          :current-page="page"
          :page-size="pageSize"
          @current-change="changePage"
        >
        </el-pagination>
      </el-footer>
  </el-container>
</template>

<script>
    import {getCoachList} from '@/api/coach'
    import {studentList, updateStudentReserveAuth, delStudent} from '@/api/student'
    export default {
        name: "list",
        inject: ['reload'],
        data () {
            return {
                form: {
                    query_field: '',
                    coach_id: 0,
                    degree: 0,
                    type: 0,
                },
                coachList: [
                    {id:0, name: '全部'},
                ],
                degreeList: [
                    {id: 0, name: '全部' },
                    {id: 1, name: '科目一'},
                    {id: 2, name: '科目二'},
                    {id: 3, name: '科目三'},
                    {id: 4, name: '科目四'}
                ],
                typeList: [
                    {id: 0, name: '全部'},
                    {id: 1, name: '普通学员'},
                    {id: 2, name: 'vip学员'}
                ],
                tableData:[],
                loading: true,
                page: 1,
                pageSize: 10,
                total: 0,
            };
        },
        methods: {
          search() {
             var data = {
                 coach_id: this.form.coach_id,
                 degree_id: this.form.degree,
                 student_type: this.form.type
             };
             if (this.form.query_field.trim().length != 0) {
                 data.query_field = this.form.query_field;
             }
             this.loading = true;
             //第一次查询不需要加分页相关信息
             studentList(data).then(response => {
                 this.tableData = response.data.list;
                 this.loading = false;
                 this.total = Number(response.data.paginate.total);
                 this.pageSize = Number(response.data.paginate.pageSize);
                 this.page = Number(response.data.paginate.current);
                 this.loading = false;
             }).catch( err => {
                  this.loading = false;
             })
          },
          reset(ref) {
              this.$refs[ref].resetFields();
          },
          jumpRecommend (student_id) {
              this.$router.push({path: '/student/recommend',query: {student_id: student_id}});
          },
          jumpRecord(student_id) {
              this.$router.push({path: '/student/record',query: {student_id: student_id}});
          },
          del (student_id) {
              this.loading = true;
              delStudent({student_id: student_id}).then(response => {
                  this.$message.success(response.msg);
                  this.loading = false;
                  this.reload();
              }).catch(err => {
                  this.loading = false;
              })
          },
          info (student_id) {
              this.$router.push({path:'/student/info',query:{student_id: student_id}});
          },
          changeAuth(student_id, index) {
              var data = {
                  student_id: student_id,
                  auth: this.tableData[index].auth === true?  1 : 2,
              };
              this.loading = true;
              updateStudentReserveAuth(data).then(response => {
                  this.$message.success(response.msg);
                  this.loading = false;
              }).catch( err => {
                  this.loading = false;
              })
          },
          changePage(currentPage) {
              var data = {
                  coach_id: this.form.coach_id,
                  degree_id: this.form.degree,
                  student_type: this.form.type,
                  page: currentPage,
                  pageSize: this.pageSize
              };
              if (this.form.query_field.trim().length != 0) {
                  data.query_field = this.form.query_field;
              }
              this.loading = true;
              studentList(data).then(response => {
                  this.tableData = response.data.list;
                  this.loading = false;
                  this.total = Number(response.data.paginate.total);
                  this.pageSize = Number(response.data.paginate.pageSize);
                  this.page = Number(response.data.paginate.current);
                  this.loading = false;
              }).catch( err => {
                  this.loading = false;
              })
          }
        },mounted() {
            getCoachList().then(response => {
              response.data.forEach( row => {
                  this.coachList.push(row);
              })
              //获取学员信息
              studentList({}).then(response => {
                  this.tableData = response.data.list;
                  this.loading = false;
                  this.total = Number(response.data.paginate.total);
                  this.pageSize = Number(response.data.paginate.pageSize);
                  this.page = Number(response.data.paginate.current);
              }).catch( err => {

              })
            }).catch( err => {
            })
        }
    }
</script>

<style scoped>
    .el-container {
      width: 99%;
      max-width: 100%;
      position: relative;
      border: 1px solid #F2F6FC;
      border-radius: 4px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
      margin: 10px auto;
    }

    .el-header {
      width: 100%;
      position: relative;
    }
    .el-header h3 {
      text-align: center;
      font-size: 20px;
      height: 20px;
      line-height: 20px;

    }

    .el-footer{
      text-align: center;
    }
</style>
